<template>
  <!-- 点位管理 => 区域管理 -->
  <div>
    <!-- 搜索框 -->
    <el-row>
      <el-col :span="24">
        <div class="header">
          <el-form :inline="true">
            <el-form-item label="订单编号：">
              <el-input v-model="orderNo" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="选择日期：">
                <el-date-picker
                v-model="value1"
                type="daterange"
                range-separator="~"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
    <!--  列表-->
    <el-row>
      <el-col :span="24">
        <div class="body">
          <el-table
            :data="OrderList.currentPageRecords"
            :header-cell-style="{ background: '#f3f6fb' }"
            style="width: 100%"
          >
            <el-table-column
              fixed
              type="index"
              :index="indexMethod"
              label="序号"
              width="100"
            >
            </el-table-column>
            <el-table-column prop="orderNo" label="订单编号" width="300">
            </el-table-column>
            <el-table-column prop="skuName" label="商品名称" width="300">
            </el-table-column>
            <el-table-column prop="amount" label="订单金额"> </el-table-column>
            <el-table-column prop="innerCode" label="设备编号">
            </el-table-column
            >OrderList
            <el-table-column prop="status" label="订单状态"> </el-table-column>
            <el-table-column prop="createTime" label="订单日期">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-link
                  :underline="false"
                  @click="lookFn(scope.row)"
                  type="primary"
                  >查看详情</el-link
                >
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            next-text="下一页"
            prev-text="上一页"
            @current-change="handleCurrentChange"
            :current-page="pageIndex"
            :page-count="+OrderList.totalPage"
            layout="total, slot, ->, prev, next"
          >
            <span class="page"
              >共{{ OrderList.totalCount || 0 }}条记录 第 {{ pageIndex }}/{{
                OrderList.totalPage
              }}页</span
            >
          </el-pagination>
        </div>
      </el-col>
    </el-row>
    <!-- table 弹框 查看详情 -->
     <el-dialog title="订单详情" :visible.sync="dialogTableVisible"  width="686px">
        <div class="dialog_top">
            <i class="bgcimage"></i><span>{{row.status}} <span class="bogimage"></span></span>
        </div>
        <div class="dialog_bottom">
            <el-row>
                <el-col :span="3"><span>订单编号:：</span></el-col>
                <el-col :span="8"><span>{{ row.orderNo}}</span></el-col>
                 <el-col :span="2"><div style="height:16px"></div></el-col>
                <el-col :span="3"><span>商品名称：</span></el-col>
                <el-col :span="8"><span>{{ row.skuName}}</span></el-col>
            </el-row>
            <el-row>
                <el-col :span="3"><span>设备编号：</span></el-col>
                <el-col :span="8"><span>{{row.innerCode}}</span></el-col>
                <el-col :span="2"><div style="height:16px"></div></el-col>
                <el-col :span="3"><span>订单金额：</span></el-col>
                <el-col :span="8"><span>{{ row.price}}</span></el-col>
            </el-row>
            <el-row>
                <el-col :span="3"><span>完成时间：</span></el-col>
                <el-col :span="8"><span>{{row.updateTime}}</span></el-col>
                <el-col :span="2"><div style="height:16px"></div></el-col>
                <el-col :span="3"><span>创建时间：</span></el-col>
                <el-col :span="8"><span>{{ row.createTime }}</span></el-col>
            </el-row>
            <el-row>
                <el-col :span="3"><span>设备地址：</span></el-col>
                <el-col :span="8"><span>{{row.addr}}</span></el-col>
                <el-col :span="2"><div style="height:16px"></div></el-col>
                <el-col :span="3"><span>支付方式：</span></el-col>
                <el-col :span="8"><span>{{ arr[row.payType]}}</span></el-col>
            </el-row>
        </div>
    </el-dialog>
  </div>
</template>

<script>
// import { getSearch } from '@/api/other'
import dayjs from 'dayjs'
import { orderList } from '@/api/order'
export default {
  data () {
    return {
      /* 查询条件 */
      value1: '',
      orderNo: '',
      startData: '',
      endtData: '',
      /* 当前页 */
      pageIndex: 1,
      /* 当前页数量 */
      pageSize: 10,
      /* 区域数据 */
      OrderList: {},
      /* 详情数据 */
      /* table弹框 */
      dialogTableVisible: false,
      arr: ['', '支付宝支付', '微信支付'],
      row: {}
    }
  },
  methods: {
    /* 查询 */
    async onSubmit () {
      await this.axiosFn()
      this.value1 = ''
      this.orderNo = ''
    },
    /* --------------------------- */
    /* 分页 */
    handleCurrentChange (val) {
      this.pageIndex = val
      this.axiosFn()
    },
    /* --------------------- */
    /* 列表数据 */
    async axiosFn () {
      const res = await orderList({
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        orderNo: this.orderNo,
        startDate: this.value1 !== '' ? dayjs(this.value1[0]).format('YYYY-MM-DD') : '',
        endDate: this.value1 !== '' ? dayjs(this.value1[1]).format('YYYY-MM-DD') : ''
      })
      const arr = ['未支付', '支付成功', '出货成功', '', '已失效']
      // console.log(res)
      this.OrderList = JSON.parse(JSON.stringify(res))
      this.OrderList.currentPageRecords.forEach((item) => {
        // console.log(item.createTime)
        item.createTime = item.createTime.split('T').join(' ')
        item.status = arr[item.status]
      })
    },
    /* ----------------------------- */
    /*  查看详情 */
    async lookFn (row) {
      this.dialogTableVisible = true
      // console.log(row)
      this.row = JSON.parse(JSON.stringify(row))
      this.row.createTime = this.row.createTime.split('T').join(' ')
      this.row.updateTime = this.row.updateTime.split('T').join(' ')
      this.row.addr = this.row.addr.split('-').splice(this.row.addr.split('-').length - 1, 1).join('')
    },
    /* ------------------------- */
    /* 序号 */
    indexMethod (index) {
      return index + 1 + 10 * (this.pageIndex - 1)
    }
  },
  async created () {
    this.axiosFn()
  }
}
</script>

<style lang="scss" scoped>
.header {
  background-color: #fff;
  display: flex;
  height: 64px;
  align-items: center;
  margin-bottom: 25px;
  padding-left: 17px;

  .el-form-item {
    margin-bottom: 0px;
  }
  .el-button {
    min-width: 80px;
    height: 36px;
    padding: 0;
    background-color: #5f84ff;
    border: none;
  }
  ::v-deep .el-input__inner {
    height: 36px;
  }
}
.body {
  width: 100%;
  background-color: #fff;
  padding-left: 30px;
  padding: 18px 16px;
  ::v-deep .el-table {
    box-sizing: border-box;
    max-width: 100%;
    background-color: #fff;
    font-size: 15px;
    color: #606266;
    border: 0px;
    .el-link--inner {
      margin-right: 10px;
      font-size: 16px;
    }
  }
  .el-button {
    width: 80px;
    height: 36px;
    padding: 0;
    background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
    border: none;
    color: #fff;
    margin-bottom: 10px;
  }
  .el-table--scrollable-x .el-table__body-wrapper {
    overflow-x: hidden;
  }
  .page {
    height: 28px;
    line-height: 28px;
    font-size: 15px !important;
    color: #dbdfe5 !important;
    font-weight: 400;
    margin: 25px 10px;
  }
  ::v-deep .btn-next,
  ::v-deep .btn-prev {
    width: 70px;
    height: 32px;
    margin: 0 16px;
    border-radius: 2px;
    background-color: #d5ddf8;
    margin: 20px 14px;
  }
}
/* 弹框 */
::v-deep .el-dialog {
  border-radius: 10px;
  padding: 20px 15px;
}
/* table 弹框 */
.dialog_top {
    position: relative;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 54px;
    margin-bottom: 30px;
    background-color: hsla(0,0%,92.5%,.39);
    padding: 0px 15px;
    .bgcimage{
        display: inline-block;
        width: 50px;
        height: 50px;
        margin-right: 10px;
        background: url('') no-repeat center;
    }
    .bogimage {
        position: absolute;
        top: -10px;
        right: 100px;
        display: inline-block;
        width: 80px;
        height: 64px;
        background: url('https://likede2-admin.itheima.net/img/pic_2.3b5af41c.png') no-repeat center;
        vertical-align: middle;

    }
}
.dialog_bottom {
    padding-left: 24px;
    .el-row {
        margin-bottom: 20px;
        span {
            display: inline-table;
            line-height: 30px;
        }
    }
}
</style>>
